<template>
  <div class="news">
    <!-- 头部      新闻-->
    <van-row class="bacc">
      <van-col span="4" style="overflow: hidden">
        <img
          class="icon"
          src="../assets/icon.png"
          v-if="!$store.state.islogin"
        />
        <van-image
          v-else
          round
          width="40px"
          :src="$store.state.avatar"
          style="margin: 5px 0px 0px 10px;"
        />
      </van-col>
      <van-col span="15">
        <!-- 搜索框 -->
        <van-search
          class="bacc index_header_search"
          v-model="search"
          shape="round"
          placeholder="请输入搜索关键字"
          maxlength="50"
          @search="onSearch"
        >
        </van-search>
      </van-col>
      <!-- 搜索按钮 -->
      <van-button
        type="info"
        size="small"
        style="margin: 12px 0px 0px 17px;"
        @click="onSearch"
        >搜索</van-button
      >
    </van-row>

    <!-- 模板内容 -->
    <van-tabs v-model="active" sticky background="cyan" v-if="!isonSearch">
      <!-- 导航栏 -->
      <van-tab v-for="(item, i) in category" :key="i" :title="item">
        <!-- 文章内容 -->
        <van-list
          v-model="loading"
          finished-text="没有更多了"
          @load="loadMore"
          style="margin-bottom: 45px;"
        >
          <!-- 单一文章信息开始 -->
          <div class="articleItem" v-for="(item, i) in articles" :key="i">
              <router-link :to="`/article/${i}`">
              <!-- 文章标题开始 -->
              <div class="articleItem-header">
                来源: {{ item.src }} 时间:{{ item.time }}
              </div>
              <!-- 文章标题结束 -->
              <!-- 文章图文信息开始 -->
              <div class="articleItem-wrapper">
                <!-- 文章图像开始  -->
                <div class="articleImg">
                  <img :src="item.pic" />
                </div>
                <!-- 文章图像结束 -->
                <!-- 文章简介开始 -->
                <div class="articleDes">
                  {{ item.title }}
                </div>
                <!-- 文章简介结束 -->
              </div>
              <!-- 文章图文信息结束 -->
              </router-link>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>

    <!-- 点击搜索后展示内容 -->
    <van-tabs v-model="active" sticky background="cyan" v-else>
      <!-- 导航栏 -->
      <van-tab :title="this.search">
        <!-- 文章内容 -->
        <van-list finished-text="没有更多了" style="margin-bottom: 45px;">
          <!-- 单一文章信息开始 -->
          <div
            class="articleItem"
            v-for="(item, i) in Search_articles"
            :key="i"
          >
            <a :href="`${item.url}`">
              <!-- 文章标题开始 -->
              <div class="articleItem-header">
                来源: {{ item.src }} 时间:{{ item.time }}
              </div>
              <!-- 文章标题结束 -->
              <!-- 文章图文信息开始 -->
              <div class="articleItem-wrapper">
                <!-- 文章图像开始  -->
                <div class="articleImg">
                  <img :src="item.pic" />
                </div>
                <!-- 文章图像结束 -->
                <!-- 文章简介开始 -->
                <div class="articleDes">
                  {{ item.title }}
                </div>
                <!-- 文章简介结束 -->
              </div>
              <!-- 文章图文信息结束 -->
            </a>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 底部选项卡 --->
    <xrzp-tabbar></xrzp-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: "", //搜索内容
      active: 0, //默认值"头条"
      category: [], //保存类别列表
      page: 0, //起始页码
      loading: false,
      articles: [], //保存当前文章列表
      Search_articles: [], //保存当前文章列表
      isonSearch: false, //搜索状态
    };
  },
  methods: {
    // 点击搜索发送请求
    onSearch() {
      console.log(`搜索关键字:${this.search}....`);
      this.axios
        .get(
          `/jisuapi/newSearch?keyword=${this.search}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
        )
        .then((result) => {
          this.Search_articles = result.data.result.result.list;
          // 修改搜索状态
          this.isonSearch = this.search == 0 ? false : true;
        });
    },
    /** 加载类别列表 */
    loadCategory() {
      // 通过aixos发送请求,访问类别列表
      this.axios
        .get("/jisuapi/channel?appkey=b0e7418fe9bef46dcb47a53374ffbef1")
        .then((result) => {
          // console.log(result.data.result);
          // result.data.result.result => 返回类别对象数组
          this.category = result.data.result.result;
        });
    },
    //通过类别cid,查询文章列表,通过回调方法返回结果
    // callback:回调方法,当拿到响应结果后立即调用,将传入刚查到的文章列表数据
    loadArticles(cid, page, callback) {
      // console.log(cid);
      this.loading = true;
      this.axios
        .get(
          `/jisuapi/get?channel=${cid}&num=20&start=${page}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
        )
        .then((result) => {
          console.log(`加载"${cid}"分类...`);
          let articles = result.data.result.result.list;
          this.$store.commit('news',articles);
          // console.log(articles);
          this.loading = false;
          // 立即调用callback，执行后续任务
          callback(articles);
        });
    },
    // 触底加载
    loadMore() {
      // 每次请求20条数据
      this.page += 20;
      let cid = this.category[this.active];
      // console.log(`loadMore...cid:${cid} page:${this.page}`);
      // 发送http请求,获取当前类别下的下一页数据,更新列表
      this.loadArticles(cid, this.page, (list) => {
        // 合并旧数据与新数据,到新的数组
        this.articles = [...this.articles, ...list];
        this.$store.commit('news',articles);
      });
    },
  },
  // 页面挂载完毕后
  mounted() {
    // 加载文章类别列表 更新页面导航
    this.loadCategory();
    // 加载UI类别下的文章列表,给默认值
    this.loadArticles("头条", 0, (list) => {
      // 请求到数据刷新到data
      this.articles = list;
    });
  },
  watch: {
    // 监听顶部导航
    active(newval) {
      // 滚动到顶部
      window.scrollTo(0, 0);
      // 初始化页码
      this.page = 0;
      // newval 即是切换到的类别的类别id,可以作为cid发请求
      // 发请求 更新列表
      this.loadArticles(this.category[newval], 0, (list) => {
        // 请求到数据刷新到data
        this.articles = list;
      });
    },
    // 监听搜索内容
    search() {
      // 内容为空,修改搜索状态
      if (this.search == "") {
        this.isonSearch = false;
      }
    },
  },
};
</script>
<style scoped>
.news .icon {
  width: 45px;
  display: inline-block;
  margin: 4px 0 0 13px;
}
.news .index_header_search {
  padding: 10px 0 10px 0;
}
.news .searchBtn {
  margin: 12px 10px 5px 4px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  padding-left: 4px;
  padding-right: 4px;
}
/* 头部背景颜色 */
/* 统一样式 rgb(123, 183, 253) */
.news .bacc {
  background-color: rgb(123, 183, 253);
}
.articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
  margin-left: 10px;
}
.articleItem-wrapper {
  display: flex;
  /* align-items: center; */
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
  margin-left: 10px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>
